<template>
  <div>
    <h1>商品详情</h1>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="商品名称">
        <el-input
          class="ipt"
          v-model="form.name"
          placeholder="请输入商品名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input
          class="ipt"
          v-model="form.type"
        ></el-input>
      </el-form-item>
      <el-form-item label="当前状态">
        <el-input class="ipt" :value="this.form.type1==1?'在售':'已下架'">
         
        </el-input>
      </el-form-item>
      <el-form-item label="所属分类">
        <el-select v-model="form.one" placeholder="请选择一级品类">
          <el-option label="区域一" value="shanghai"></el-option>
        </el-select>
        <el-select v-model="form.two" placeholder="请选择二级品类">
          <el-option label="区域一" value="shanghai"></el-option>
        </el-select>
      </el-form-item>
      <!-- 商品价格 -->
      <el-form-item label="商品价格">
        <el-input v-model="form.num" :disabled="true" class="ipt1">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <!-- 商品库存 -->
      <el-form-item label="商品库存">
        <el-input v-model="form.num1" :disabled="true" class="ipt1">
          <template slot="append">件</template>
        </el-input>
      </el-form-item>
      <el-form-item label="商品图片">
        <img class="imgs" :src="form.img+form.img1" alt="" />
      </el-form-item>
      <el-form-item label="商品详情">
        <span>{{ form.desc }}</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { detail,category } from "../../http/index";
export default {
  data() {
    return {
      data: this.$route.params.id,
      form: {
        name: "", //名称
        type: "", //描述
        type1: "", //状态
        one: "", //一级分类
        two: "", //二级分类
        num: "", //价格
        num1: "", //库存
        img: "", //图片
        img1:'',
        desc: "", //详情
      },
    };
  },
  methods: {
    //请求接口
    detList() {
      detail({ productId: this.$route.params.id }).then((res) => {
        console.log(res);
        this.form = {
          name: res.data.data.name,
          type: res.data.data.subtitle,
          type1: res.data.data.status,
          num: res.data.data.price,
          num1: res.data.data.stock,
          img: res.data.data.imageHost,
          img1:res.data.data.mainImage,
          desc: res.data.data.detail,
        };
      });
      //品类接口
      category().then(res => {
        console.log(res);
      })
    },
    onSubmit() {},
    handleChange(value) {
      console.log(value);
    },
  },
  created() {
    this.detList();
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>
<style lang='scss' scoped>
.ipt {
  width: 50%;
}
.ipt1 {
  width: 20%;
}
.imgs{
  width: 70px;
  height: 70px;
}
</style>
